// 导入 React 核心功能：useState 用于状态管理，useEffect 用于副作用处理
import React, { useState, useEffect } from 'react'
// 导入 Ant Design Mobile 组件库：提供移动端UI组件
import { NavBar, SearchBar, List, Button, Toast } from 'antd-mobile'
// 导入 React Router 的导航钩子，用于页面跳转和路由管理
import { useNavigate } from 'react-router-dom'
// 导入 Ant Design Mobile 图标：提供各种图标组件
import { LeftOutline } from 'antd-mobile-icons'
// 导入样式文件：定义组件的样式规则
import './index.css'
// 导入自定义请求工具：封装了 axios，用于与后端 API 通信
import request from '../../api/request'

/**
 * 搜索结果数据接口
 * 定义了搜索结果的通用数据结构，用于统一处理不同类型的搜索结果
 * 这个接口是搜索结果的标准格式，便于后续扩展其他类型的搜索
 */
interface SearchResult {
  id: number                                    // 结果项唯一标识符，用于区分不同的搜索结果
  title: string                                // 结果标题，显示在搜索结果列表中的主要文本
  type: 'doctor' | 'hospital' | 'medicine' | 'disease'  // 结果类型，用于分类和样式处理
  description: string                          // 结果描述，提供额外的详细信息
}

/**
 * 热门搜索项接口
 * 定义了热门搜索标签的数据结构，用于展示用户常用的搜索关键词
 * 这些数据通常从后端获取，帮助用户快速找到热门内容
 */
interface PopularSearchItem {
  id: number      // 热门搜索项唯一标识符，用于 React 的 key 属性和数据管理
  name: string    // 热门搜索关键词，用户点击后可以直接搜索
}

/**
 * 病友圈数据项接口
 * 定义了病友圈搜索结果的数据结构，这是当前搜索功能的主要数据类型
 * 包含了病友圈的所有必要信息，用于展示和交互
 */
interface SickCircleItem {
  sickCircleId: number    // 病友圈唯一标识符，用于跳转到详情页和数据处理
  title: string          // 病友圈标题，用户发布的问题或分享的主题
  detail: string         // 病友圈详细内容，包含具体的问题描述或分享内容
  amount: number         // 悬赏金额，如果用户设置了悬赏，这里显示具体金额
  collectionNum: number  // 收藏数量，显示有多少用户收藏了这个内容
  commentNum: number     // 评论数量，显示有多少用户参与了讨论
  releaseTime: number    // 发布时间戳，用于计算相对时间（如"3天前"）
}

/**
 * 搜索页面组件
 * 提供完整的搜索功能，包括搜索输入、结果展示、搜索历史、热门搜索等
 * 这是应用的核心搜索功能，支持多种搜索场景和用户交互
 */
function Search() {
  // 获取路由导航函数，用于页面跳转和返回操作
  const navigate = useNavigate()
  
  // ==================== 状态管理 ====================
  // 以下状态变量用于管理组件的各种状态和数据
  
  /**
   * 搜索框的输入值
   * 用于控制搜索框的显示内容，当用户输入时实时更新
   * 这个状态与 SearchBar 组件的 value 属性绑定
   */
  const [searchValue, setSearchValue] = useState('')
  
  /**
   * 搜索结果列表
   * 存储搜索返回的结果数据，用于在列表中展示搜索结果
   * 数据类型为 SearchResult[]，包含所有类型的搜索结果
   */
  const [searchResults, setSearchResults] = useState<SearchResult[]>([])
  
  /**
   * 搜索状态
   * 标记当前是否正在搜索中，用于显示加载状态和防止重复搜索
   * true 表示正在搜索，false 表示搜索完成或未开始搜索
   */
  const [isSearching, setIsSearching] = useState(false)
  
  /**
   * 热门搜索列表
   * 存储热门搜索关键词，从后端API获取或使用默认数据
   * 这些数据在页面加载时获取，为用户提供搜索建议
   */
  const [popularSearches, setPopularSearches] = useState<PopularSearchItem[]>([])
  
  /**
   * 热门搜索加载状态
   * 标记热门搜索数据是否正在加载，用于显示加载指示器
   * 防止在数据加载完成前显示空白或错误内容
   */
  const [isLoadingPopular, setIsLoadingPopular] = useState(false)
  
  /**
   * 搜索历史记录
   * 存储用户的历史搜索关键词，从本地存储读取和保存
   * 最多保存10条记录，按时间倒序排列，支持去重
   */
  const [searchHistory, setSearchHistory] = useState<string[]>([])
  
  /**
   * 病友圈搜索结果
   * 存储病友圈相关的搜索结果，这是当前搜索功能的主要数据源
   * 与 searchResults 配合使用，提供更详细的病友圈信息
   */
  const [sickCircleResults, setSickCircleResults] = useState<SickCircleItem[]>([])

  // ==================== API 数据获取函数 ====================
  // 以下函数负责从后端获取数据，处理API请求和响应
  
  /**
   * 获取热门搜索数据
   * 从后端API获取热门搜索关键词列表，用于为用户提供搜索建议
   * 如果API请求失败，会使用默认数据作为备选方案，确保功能可用性
   */
  const getPopularSearches = async () => {
    // 设置加载状态为true，开始加载
    setIsLoadingPopular(true)
    try {
      // 发起API请求获取热门搜索数据
      const res = await request.get('/health/share/v1/popularSearch')
      // 检查响应状态和数据
      if (res.status === 200 && res.data.result) {
        // 成功获取数据，更新状态
        setPopularSearches(res.data.result)
      }
    } catch (error) {
      // API请求失败，记录错误信息
      console.error('获取热门搜索失败:', error)
      // 使用默认数据作为备选方案，确保功能可用性
      setPopularSearches([
        { id: 1, name: '感冒' },        // 常见疾病
        { id: 2, name: '高血压' },      // 慢性疾病
        { id: 3, name: '糖尿病' },      // 慢性疾病
        { id: 4, name: '心脏病' },      // 心血管疾病
        { id: 5, name: '阿莫西林' },    // 常用药品
        { id: 6, name: '布洛芬' }       // 常用药品
      ])
    } finally {
      // 无论成功还是失败，都要将加载状态设置为false
      setIsLoadingPopular(false)
    }
  }

  // ==================== 组件生命周期 ====================
  // 以下代码处理组件的生命周期事件
  
  /**
   * 组件加载时获取热门搜索和搜索记录
   * 在组件挂载时初始化必要的数据，确保页面加载后立即显示内容
   * 这是组件的初始化逻辑，只在组件首次渲染时执行
   */
  useEffect(() => {
    // 获取热门搜索数据
    getPopularSearches()
    // 加载用户的搜索历史记录
    loadSearchHistory()
  }, []) // 空依赖数组，确保只在组件挂载时执行一次

  // ==================== 搜索历史管理函数 ====================
  // 以下函数负责管理用户的搜索历史，包括读取、保存和清除操作
  
  /**
   * 加载搜索记录
   * 从本地存储中读取用户的搜索历史，用于显示历史搜索建议
   * 使用 try-catch 处理可能的存储错误，确保应用稳定性
   */
  const loadSearchHistory = () => {
    try {
      // 从 localStorage 中读取搜索历史数据
      const history = localStorage.getItem('searchHistory')
      if (history) {
        // 如果存在历史数据，解析JSON并更新状态
        setSearchHistory(JSON.parse(history))
      }
    } catch (error) {
      // 如果读取失败（如数据格式错误），记录错误但不影响应用运行
      console.error('加载搜索记录失败:', error)
    }
  }

  /**
   * 保存搜索记录
   * 将新的搜索关键词保存到本地存储和历史记录中
   * 实现去重功能，将新搜索词放在最前面，限制最多保存10条记录
   * 
   * @param keyword 搜索关键词，用户输入的搜索内容
   */
  const saveSearchHistory = (keyword: string) => {
    try {
      // 将新关键词添加到历史记录开头，去重并限制最多保存10条
      // 使用 filter 去除重复项，使用 slice 限制数量
      const newHistory = [keyword, ...searchHistory.filter(item => item !== keyword)].slice(0, 10)
      // 更新状态
      setSearchHistory(newHistory)
      // 保存到本地存储，使用JSON.stringify转换为字符串
      localStorage.setItem('searchHistory', JSON.stringify(newHistory))
    } catch (error) {
      // 如果保存失败（如存储空间不足），记录错误但不影响应用运行
      console.error('保存搜索记录失败:', error)
    }
  }

  /**
   * 清除搜索记录
   * 清空本地存储和历史记录，为用户提供隐私保护功能
   * 用户可以通过界面按钮主动清除搜索历史
   */
  const clearSearchHistory = () => {
    try {
      // 清空状态中的历史记录
      setSearchHistory([])
      // 从本地存储中删除历史记录
      localStorage.removeItem('searchHistory')
    } catch (error) {
      // 如果清除失败，记录错误但不影响应用运行
      console.error('清除搜索记录失败:', error)
    }
  }

  // ==================== 搜索功能函数 ====================
  // 以下函数负责执行实际的搜索操作，处理搜索逻辑
  
  /**
   * 执行搜索功能
   * 调用病友圈查询接口进行搜索，这是当前搜索功能的核心实现
   * 支持空值检查、搜索历史保存、结果处理和错误处理
   * 
   * @param value 搜索关键词，用户输入的搜索内容
   */
  const handleSearch = async (value: string) => {
    // 如果搜索关键词为空或只包含空格，清空搜索结果并返回
    if (!value.trim()) {
      setSearchResults([])
      setSickCircleResults([])
      return
    }

    // 设置搜索状态为true，开始搜索
    setIsSearching(true)
    
    // 保存搜索记录，将当前搜索词添加到历史记录中
    saveSearchHistory(value)
    
    try {
      // 调用病友圈查询接口，传递搜索关键词
      const res = await request.get('/health/user/sickCircle/v1/searchSickCircle', {
        params: {
          keyWord: value  // 后端接口期望的参数名
        }
      })
      
      // 检查响应状态和数据
      if (res.status === 200 && res.data.result) {
        // 保存原始的病友圈数据，用于详细展示
        setSickCircleResults(res.data.result)
        // 将病友圈数据转换为搜索结果格式，统一处理不同类型的结果
        const sickCircleSearchResults: SearchResult[] = res.data.result.map((item: SickCircleItem) => ({
          id: item.sickCircleId,  // 使用病友圈ID作为结果ID
          title: item.title,      // 使用病友圈标题作为结果标题
          type: 'disease' as const, // 病友圈内容归类为疾病相关
          // 构建描述信息，包含详细内容、收藏数、评论数和悬赏信息
          description: `${item.detail} | 收藏${item.collectionNum} | 评论${item.commentNum} | ${item.amount > 0 ? `悬赏${item.amount}H币` : '无悬赏'}`
        }))
        // 更新搜索结果状态
        setSearchResults(sickCircleSearchResults)
      } else {
        // 如果没有搜索结果，清空结果列表
        setSickCircleResults([])
        setSearchResults([])
      }
    } catch (error) {
      // 搜索过程中发生错误，记录错误信息并清空结果
      console.error('搜索病友圈失败:', error)
      setSickCircleResults([])
      setSearchResults([])
    } finally {
      // 无论成功还是失败，都要将搜索状态设置为false
      setIsSearching(false)
    }
  }

  // ==================== 事件处理函数 ====================
  // 以下函数负责处理用户的各种交互事件
  
  /**
   * 处理搜索结果点击事件
   * 根据结果类型跳转到相应的详情页面，实现搜索结果的导航功能
   * 支持不同类型的搜索结果，为后续功能扩展预留接口
   * 
   * @param result 搜索结果项，包含类型、ID等信息
   */
  const handleResultClick = (result: SearchResult) => {
    // 根据不同类型跳转到不同页面，实现分类导航
    switch (result.type) {
      case 'disease':
        // 病友圈内容跳转到详情页，使用病友圈ID构建URL
        navigate(`/sick-circle-detail/${result.id}`)
        break
      case 'hospital':
        // 医院详情功能暂未开发，显示提示信息
        Toast.show({ content: '医院详情功能开发中' })
        break
      case 'medicine':
        // 药品详情功能暂未开发，显示提示信息
        Toast.show({ content: '药品详情功能开发中' })
        break
      default:
        // 其他类型暂不处理
        break
    }
  }

  // ==================== 工具函数 ====================
  // 以下函数提供通用的工具功能，用于数据处理和样式处理
  
  /**
   * 获取类型标签文本
   * 根据类型返回对应的中文标签，用于在界面上显示结果类型
   * 这个函数将英文类型转换为用户友好的中文标签
   * 
   * @param type 结果类型，如 'doctor', 'hospital' 等
   * @returns 类型标签文本，如 '医生', '医院' 等
   */
  const getTypeLabel = (type: string) => {
    switch (type) {
      case 'doctor': return '医生'      // 医生类型
      case 'hospital': return '医院'    // 医院类型
      case 'medicine': return '药品'    // 药品类型
      case 'disease': return '疾病'     // 疾病类型
      default: return '其他'            // 默认类型
    }
  }

  /**
   * 获取类型颜色
   * 根据类型返回对应的主题颜色，用于在界面上区分不同类型的结果
   * 每种类型使用不同的颜色，提高用户体验和视觉识别度
   * 
   * @param type 结果类型，如 'doctor', 'hospital' 等
   * @returns 颜色值，十六进制颜色代码
   */
  const getTypeColor = (type: string) => {
    switch (type) {
      case 'doctor': return '#1890ff'    // 蓝色，代表医生
      case 'hospital': return '#52c41a'  // 绿色，代表医院
      case 'medicine': return '#fa8c16'  // 橙色，代表药品
      case 'disease': return '#f5222d'   // 红色，代表疾病
      default: return '#666'             // 灰色，默认颜色
    }
  }

  // ==================== 组件渲染 ====================
  // 以下代码负责渲染组件的UI界面
  
  return (
    <div className="search-page">
      {/* 顶部导航栏：提供返回按钮和页面标题 */}
      <NavBar 
        className="sticky-navbar"
        onBack={() => navigate(-1)}  // 返回上一页
        backArrow={<LeftOutline />}  // 使用左箭头图标
        style={{
          '--border-bottom': '1px solid #f0f0f0'  // 底部边框样式
        }}
      >
        搜索  {/* 页面标题 */}
      </NavBar>

      <div className="search-container">
        {/* 搜索输入框区域：用户输入搜索关键词的地方 */}
        <div className="search-input-wrapper">
          <SearchBar
            placeholder="搜索医生、医院、药品、疾病症状"  // 占位符文本
            value={searchValue}                           // 绑定输入值
            onChange={setSearchValue}                     // 输入变化处理函数
            onSearch={handleSearch}                       // 搜索按钮点击处理函数
            showCancelButton                              // 显示取消按钮
            onCancel={() => navigate(-1)}                 // 取消按钮点击处理函数
            style={{
              '--border-radius': '8px',                   // 圆角样式
              '--background': '#f5f5f5'                   // 背景色样式
            }}
          />
        </div>

        {/* 搜索结果区域：当用户输入搜索关键词时显示 */}
        {searchValue && (
          <div className="search-results">
            {isSearching ? (
              // 搜索中状态：显示加载提示
              <div className="search-loading">
                <p>搜索中...</p>
              </div>
            ) : searchResults.length > 0 ? (
              // 有搜索结果：显示结果列表
              <List>
                {searchResults.map((result) => (
                  <List.Item
                    key={result.id}                       // React key属性
                    onClick={() => handleResultClick(result)}  // 点击处理函数
                    arrow={false}                         // 不显示右箭头
                    style={{ cursor: 'pointer' }}         // 鼠标指针样式
                  >
                    <div className="search-result-item">
                      {/* 病友圈结果特殊布局：使用左图右文的布局方式 */}
                      {result.type === 'disease' && (() => {
                        // 从病友圈结果中找到对应的详细数据
                        const sickCircleItem = sickCircleResults.find(s => s.sickCircleId === result.id);
                        if (!sickCircleItem) return null;  // 如果找不到数据则不渲染
                        
                        return (
                          // 病友圈结果使用左图右文布局，提供更好的视觉体验
                          <div className="sick-circle-result-layout">
                            {/* 左侧头像区域 */}
                            <div className="sick-circle-avatar">
                              <div className="avatar-placeholder">
                                <span>💬</span>  {/* 使用emoji作为头像占位符 */}
                              </div>
                            </div>
                            {/* 右侧信息区域 */}
                            <div className="sick-circle-info">
                              {/* 标题和类型标签 */}
                              <div className="sick-circle-header">
                                <h4 className="sick-circle-title">{result.title}</h4>
                                <span 
                                  className="sick-circle-type"
                                  style={{ backgroundColor: getTypeColor(result.type) }}
                                >
                                  {getTypeLabel(result.type)}
                                </span>
                              </div>
                              {/* 详细内容 */}
                              <p className="sick-circle-detail">{sickCircleItem.detail}</p>
                              {/* 统计信息：收藏数、评论数、悬赏 */}
                              <div className="sick-circle-stats">
                                <span className="collection-count">收藏 {sickCircleItem.collectionNum}</span>
                                <span className="comment-count">评论 {sickCircleItem.commentNum}</span>
                                {sickCircleItem.amount > 0 && (
                                  <span className="bounty">悬赏 {sickCircleItem.amount} H币</span>
                                )}
                              </div>
                            </div>
                          </div>
                        );
                      })()}
                      
                      {/* 其他类型结果的通用布局：使用标题+描述的简单布局 */}
                      {result.type !== 'disease' && (
                        <>
                          <div className="result-header">
                            <h4 className="result-title">{result.title}</h4>
                            <span 
                              className="result-type"
                              style={{ backgroundColor: getTypeColor(result.type) }}
                            >
                              {getTypeLabel(result.type)}
                            </span>
                          </div>
                          <p className="result-description">{result.description}</p>
                        </>
                      )}
                    </div>
                  </List.Item>
                ))}
              </List>
            ) : (
              // 无搜索结果：显示提示信息
              <div className="no-results">
                <p>未找到相关结果</p>
                <p className="no-results-tip">请尝试其他关键词</p>
              </div>
            )}
          </div>
        )}

        {/* 搜索建议区域：当没有搜索关键词时显示搜索历史和热门搜索 */}
        {!searchValue && (
          <>
            {/* 搜索历史记录：显示用户之前的搜索关键词 */}
            {searchHistory.length > 0 && (
              <div className="search-history">
                <div className="history-header">
                  <h3 className="history-title">搜索记录</h3>
                  <Button 
                    size="small" 
                    fill="none" 
                    onClick={clearSearchHistory}  // 清除历史记录
                    style={{ color: '#999', fontSize: '12px' }}
                  >
                    清除
                  </Button>
                </div>
                <div className="history-tags">
                  {searchHistory.map((keyword, index) => (
                    <Button
                      key={index}
                      size="small"
                      fill="outline"
                      onClick={() => {
                        // 点击历史记录时，设置搜索值并执行搜索
                        setSearchValue(keyword)
                        handleSearch(keyword)
                      }}
                      style={{
                        margin: '4px',
                        borderRadius: '16px'
                      }}
                    >
                      {keyword}
                    </Button>
                  ))}
                </div>
              </div>
            )}

            {/* 热门搜索建议：显示系统推荐的热门搜索关键词 */}
            <div className="search-suggestions">
              <h3 className="suggestions-title">热门搜索</h3>
              <div className="suggestions-tags">
                {isLoadingPopular ? (
                  // 热门搜索加载中状态
                  <div className="popular-loading">
                    <p>加载中...</p>
                  </div>
                ) : (
                  // 显示热门搜索标签
                  popularSearches.map((item) => (
                    <Button
                      key={item.id}
                      size="small"
                      fill="outline"
                      onClick={() => {
                        // 点击热门搜索时，设置搜索值并执行搜索
                        setSearchValue(item.name)
                        handleSearch(item.name)
                      }}
                      style={{
                        margin: '4px',
                        borderRadius: '16px'
                      }}
                    >
                      {item.name}
                    </Button>
                  ))
                )}
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  )
}

// 导出搜索组件，供其他模块使用
export default Search
